<template>
  <q-dialog
    square
    no-backdrop-dismiss
    position="standard"
    v-model="userOrgRoleVisible"
    @hide="$emit('handleFinish')"
  >
    <q-card style="width: 800px; max-width: 80vw">
      <q-card-section class="row items-center q-pb-none">
        <div class="text-h6">{{ row.staff_name }}{{ $t("Permission") }}</div>
        <q-space />
        <q-btn icon="close" flat round dense v-close-popup />
      </q-card-section>
      <div class="q-pa-md">
        <q-list bordered>
          <q-item v-for="(item, index) in row.org_role" :key="index">
            <q-item-section>
              <q-item-label>{{ item.org.org_name }}</q-item-label>
            </q-item-section>
            <q-item-section side>
              <q-item-label>{{ item.role.role_name }}</q-item-label>
            </q-item-section>
            <q-item-section
              avatar
              class="cursor-pointer"
              @click="handleDelUserOrgRole(item)"
            >
              <q-icon color="primary" name="delete" />
            </q-item-section>
          </q-item>
        </q-list>
      </div>
      <q-separator />
    </q-card>
  </q-dialog>
</template>

<script setup>
import { ref } from "vue";

const userOrgRoleVisible = ref(false);
const row = ref({});
const show = (record) => {
  row.value = record;
  userOrgRoleVisible.value = true;
};
defineExpose({
  show,
});

const handleDelUserOrgRole = () => {
  console.log("handleDelUserOrgRole");
};
</script>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  name: "UserOrgRoleDialog",
});
</script>
